<template>
  <h3>路由过渡动效 演示</h3>

  <router-link class="link" to="/routetransit/demo">路由过渡动效</router-link>
  <router-link class="link" to="/routetransit/other">另一个页面</router-link>

  <div class="clip">
    <router-view v-slot="{Component, route}">
      <transition appear :name="route.meta.transition || 'slide'">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>

  <br>
  <p>
    说明: <br>
    1. 想要在路由组件上使用转场，并对导航进行动画处理，需要使用 <a href="https://router.vuejs.org/zh/api/#router-view-%E7%9A%84-v-slot"><b>v-slot API</b></a>.<br>
    2. <a href="https://v3.vuejs.org/guide/transitions-enterleave.html"><b>Transition 的所有功能</b></a> 在这里同样适用。<br>
    官方文档: <a href="https://router.vuejs.org/zh/guide/advanced/transitions.html"><b>路由过渡动效</b></a>
  </p>
</template>

<script>
export default {
  setup() {
    
  },
}
</script>

<style scoped>
.clip {
  overflow: hidden;
  width: 100%;
}

.link {
  display: inline-block;
  width: 128px;
  height: 36px;
  line-height: 36px;

  margin-top: 5px;
  margin-left: 10px;
  text-align: center;
}

.router-link-active {
  font-weight: bold;
  color: orange;
  background-color: #205081;
  border-radius: 2px;
  /* 应用于初始状态，因此此转换将应用于返回状态 */
  transition: background 0.25s ease-in;
}

.router-link-active:hover {
  background-color: #3b73af;
  /* 应用于悬停状态，因此在触发悬停时将应用此过渡 */
  transition: background 0.35s ease-out;
}

.router-link-exact-active {
  color: whitesmoke;
}

.link:hover {
  border-radius: 3px;
  background-color: #3b73af;
  color: white;
}

/*slide-left*/

.slide-left-enter-active, .slide-left-leave-active {
  transition: 0.5s linear;
}

.slide-left-enter-from, .slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-left-enter-to, .slide-left-leave-from {
  transform: translateX(0);
}

/*slide*/

.slide-enter-active, .slide-leave-active {
  transition: all 0.75s ease-out;
}
 
.slide-enter-to {
  position: absolute;
  right: 0;
}
 
.slide-enter-from {
  position: absolute;
  right: -100%;
}
 
.slide-leave-to {
  position: absolute;
  left: -100%;
}
 
.slide-leave-from {
  position: absolute;
  left: 0;
}
</style>